<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 原型链继承
        // 问题：原型中包含的引用类型属性将被所有实例共享；子类在实例化的时候不能给父类构造函数传参
        function Animal() {
            this.colors = ['black', 'white']
        }
        Animal.prototype.getColor = function () {
            return this.colors
        }
        function Dog() { }
        Dog.prototype = new Animal()

        let dog1 = new Dog()
        dog1.colors.push('brown')
        let dog2 = new Dog()
        console.log(dog2.colors)

        // 构造函数继承
        // 问题：只能继承父类的实例属性和方法，不能继承父类原型属性/方法
        function Animal(name) {
            this.name = name
            this.getName = function () {
                return this.name
            }
        }
        function Dog(name) {
            Animal.call(this, name)
        }
        Dog.prototype = new Animal()

        // 组合继承
        function Animal(name) {
            this.name = name
            this.colors = ['black', 'white']
        }
        Animal.prototype.getName = function () {
            return this.name
        }
        function Dog(name,age) {
            Animal.call(this, name)
            this.age = age
        }
        Dog.prototype = new Animal()
        Dog.prototype.constructor = Dog
        let dog3 = new Dog('dog1', 2)
        dog1.colors.push('brown')
        let dog4 = new Dog('dog2', 3)
        console.log(dog4)

        // class继承
        class Animal {
            constructor(name) {
                this.name = name
            }
            getName() {
                return this.name
            }
        }
        class Dog extends Animal {
            constructor(name, age) {
                super(name)
                this.age = age
            }
        }
    </script>
</body>

</html>